<template>
  <div>
    <h1>{{ recomTest }}{{ title }}{{ statusText }}</h1>
    <p>
      Author name：<a href="author.website">{{ author.name }}</a>
    </p>
    <p>
      Author follows:{{ authorFollows }}
      <button @click="addFollow">
        {{ isFollowed ? "Followed" : "Add Followed" }}
      </button>
    </p>
    <p>{{ content }}</p>
    <p>评论列表（{{ commentCount }}）</p>
    <ul>
        <li
        v-for="comment of comments"
        :key='comment.id'
        >
        <p>{{comment.content}}</p>
        <p>{{comment.dataTiem}}</p>
        </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "Myarticle",
  props: {
    title: String,
    isRecom: Boolean,
    // 可以定义多个数据类型
    status: [String, Number],
    author: Object,
    content: String,
    commentCount: Number,
    comments: Array,
  },
  computed: {
    recomTest() {
      return this.isRecom ? "推荐" : "";
    },
    statusText() {
      const status = Number(this.status);
      switch (status) {
        case 0:
          return "[最新]";
        case 1:
          return "[热门]";
        default:
          return "";
      }
    },
  },
  data() {
    return {
      authorFollows: this.author.follows,
      isFollowed: false,
    };
  },

  mounted() {},

  methods: {
    addFollow() {
      if (this.isFollowed) {
        this.authorFollows--;
      } else {
        this.authorFollows++;
      }
      this.isFollowed = !this.isFollowed;
    },
  },
};
</script>

<style scoped>
</style>